<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>通知</title>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <link href="https://cdn.bootcss.com/twitter-bootstrap/4.2.1/css/bootstrap.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/twitter-bootstrap/4.2.1/js/bootstrap.min.js"></script>
    <script th:src="@{/js/jquery.form.js}"></script>
    <style>
        body {
            background-image: url("/img/banner_team.jpg");
            background-position: center;
            background-attachment: fixed;
            overflow-x: hidden;
        }

        .h-center {
            margin: 0 auto;
        }

        .mt-60 {
            margin-top: 60px;
        }

        .mt-120 {
            margin-top: 120px;
        }

        .mb-60 {
            margin-bottom: 60px;
        }

        .mb-120 {
            margin-bottom: 120px;
        }

        .content {
            z-index: 1;
        }

        .content:after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(255, 255, 255, 0.8);
            z-index: -1;
            background-image: url("/img/banner_team.jpg");
            background-position: center top;
            background-size: cover;
            background-attachment: fixed;
            -webkit-filter: blur(20px);
            -moz-filter: blur(20px);
            -ms-filter: blur(20px);
            -o-filter: blur(20px);
            filter: blur(20px);
        }

        .content-deep {
            z-index: 1;
        }

        .content-deep:after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(255, 255, 255, 0.9);
            z-index: -1;
            background-position: center top;
            background-size: cover;
            background-attachment: fixed;
        }

        #myTabContentDiv {
            z-index: 1;
            position: absolute;
            top: 42px;
            bottom: 0;
            width: 100%;
        }

        #myTabDiv {
            z-index: 2;
            position: fixed;
            width: 100%;
            height: 42px;
        }
    </style>
    <script>
        $(document).ready(function () {
            $("#addInformForm").ajaxForm(function (data) {
                if (data.success) {
                    $("#resultMsg").html("发布通知成功！");
                } else {
                    $("#resultMsg").html(data.errMsg);
                }
                $('#resultModal').modal('show');
                $('#createTeamName').val("");
            });

            $("#unReadInformTab").click(function () {
                $("#unReadInformPanel").load("/api/informs/updateView/unread");
            });
            $("#todoInformTab").click(function () {
                $("#undoInformPanel").load("/api/informs/updateView/undo");
            });
            $("#readedInformTab").click(function () {
                $("#finishedInformPanel").load("/api/informs/updateView/finished");
            });

        });
    </script>
</head>
<body>
<div id="myTabDiv">
    <ul class="nav nav-tabs content-deep" id="myTab" role="tablist">
        <li class="nav-item">
            <a class="nav-link active" id="createInformTab" data-toggle="tab" href="#createInformPanel"
               role="createInform" aria-selected="true">发布通知</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" id="unReadInformTab" data-toggle="tab" href="#unReadInformPanel" role="tab"
               aria-controls="unReadInform" aria-selected="false">未读通知</a>
        </li>

        <li class="nav-item">
            <a class="nav-link" id="todoInformTab" data-toggle="tab" href="#undoInformPanel" role="tab"
               aria-controls="todoInform" aria-selected="false">待做通知</a>
        </li>

        <li class="nav-item">
            <a class="nav-link" id="readedInformTab" data-toggle="tab" href="#finishedInformPanel" role="tab"
               aria-controls="readedInform" aria-selected="false">已读/已做通知</a>
        </li>
    </ul>
</div>

<div class="tab-content" id="myTabContentDiv">
    <div class="tab-pane fade show  active mt-120" id="createInformPanel" role="tabpanel"
         aria-labelledby="createInformTab">
        <div class="card content col-5 h-center">
            <div class="card-body">
                <h2 class="card-title mb-4">发布通知</h2>
                <form th:action="@{/api/informs/add}" method="post" th:object="${addInformForm}" id="addInformForm">
                    <input hidden th:value="${userId}" name="userId">
                    <div class="form-group">
                        <label for="createInformTitle">通知标题</label>
                        <input type="text" class="form-control" placeholder="请输入通知标题"
                               id="createInformTitle" name="title">
                        <small class="form-text" id="createInformTitleLabel"></small>
                    </div>
                    <div class="form-group">
                        <label for="createInformContent">通知内容</label>
                        <textarea class="form-control" placeholder="请输入通知内容"
                                  id="createInformContent" name="content"></textarea>
                        <small class="form-text" id="createInformContentLabel"></small>
                    </div>
                    <div class="form-group">
                        <label for="createInformTeam">选择通知小组</label>
                        <select class="form-control" id="createInformTeam" name="teamId">
                            <option th:each="team:${createdTeams}" th:value="${team.teamId}"
                                    th:text="${team.name}"></option>
                        </select>
                    </div>
                    <div class="row col-md-12">
                        <input type="submit" class="btn btn-primary col-md-3" style="margin-top: 20px;"
                               id="createTeamBtn" th:value="发布通知"/>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <div class="tab-pane fade mt-60 mb-120" id="unReadInformPanel" role="tabpanel" aria-labelledby="unReadInformTab">
        <div th:fragment="unReadFragment">
            <div class="row justify-content-center mb-4" th:each="inform:${unReadInforms} ">
                <div class="col-sm-6 ">
                    <div class="card content">
                        <div class="card-body">
                            <h5 class="card-title" th:text="${inform.title}">Special title treatment</h5>
                            <small><strong>来自</strong></small>&nbsp;&nbsp;<small th:text="${inform.team.name}"></small>&nbsp;&nbsp;&nbsp;&nbsp;
                            <small><strong>时间</strong></small>&nbsp;&nbsp;<small
                                th:text="${#dates.format(inform.createTime, 'yyyy-MM-dd HH:mm:ss')}"></small>
                            <hr>
                            <p class="card-text" th:text="${inform.content}">With supporting text below as a natural
                                lead-in to additional content.</p>
                            <button  name="readInform" onclick="readInform(this)" th:value="${inform.userInformId}" class="btn btn-primary">标记为已读</button>
                            <button  name="todoInform" onclick="todoInform(this)" th:value="${inform.userInformId}" class="btn btn-success">标记为待做</button>
                            <script>
                                function readInform(e) {
                                    let userInformId = e.value;
                                    $.get("/api/informs/update/read/"+userInformId,function (data) {
                                        if (data.success) {
                                            $("#resultMsg").html("已阅！");
                                        }else{
                                            $("#resultMsg").html("提交时发生错误！");
                                        }
                                        $('#resultModal').modal('show');
                                        $("#unReadInformPanel").load("/api/informs/updateView/unread");
                                    })
                                }
                                function todoInform(e) {
                                    let userInformId =e.value;
                                    $.get("/api/informs/update/todo/"+userInformId,function (data) {
                                        if (data.success) {
                                            $("#resultMsg").html("已将任务移到待做！");
                                        }else{
                                            $("#resultMsg").html("提交时发生错误！");
                                        }
                                        $('#resultModal').modal('show');
                                        $("#unReadInformPanel").load("/api/informs/updateView/unread");
                                    });

                                }
                            </script>
                        </div>
                    </div>
                </div>
            </div>
        </div>


    </div>
    <div class="tab-pane fade mt-60 mb-120" id="undoInformPanel" role="tabpanel" aria-labelledby="undoInformTab">
        <div th:fragment="unDoFragment">
            <div class="row justify-content-center mb-4" th:each="inform:${unDoInforms}">
                <div class="col-sm-6 ">
                    <div class="card content">
                        <div class="card-body">
                            <h5 class="card-title" th:text="${inform.title}">Special title treatment</h5>
                            <small><strong>来自</strong></small>&nbsp;&nbsp;<small th:text="${inform.team.name}"></small>&nbsp;&nbsp;&nbsp;&nbsp;
                            <small><strong>时间</strong></small>&nbsp;&nbsp;<small
                                th:text="${#dates.format(inform.createTime, 'yyyy-MM-dd HH:mm:ss')}"></small>
                            <hr>
                            <p class="card-text" th:text="${inform.content}">With supporting text below as a natural
                                lead-in to additional content.</p>
                            <button  name="doInform" onclick="doInform(this)" th:value="${inform.userInformId}" class="btn btn-warning text-white">标记为已做</button>
                            <script>
                                function doInform(e){
                                    let userInformId = e.value;
                                    $.get("/api/informs/update/do/"+userInformId,function (data) {
                                        if (data.success) {
                                            $("#resultMsg").html("恭喜，完成一个任务！");
                                        }else{
                                            $("#resultMsg").html("提交时发生错误！");
                                        }
                                        $('#resultModal').modal('show');
                                        $("#undoInformPanel").load("/api/informs/updateView/undo");
                                    })
                                }
                            </script>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
    <div class="tab-pane fade mt-60" id="finishedInformPanel" role="tabpanel" aria-labelledby="finishedInformTab">
        <div th:fragment="finishedFragment">
            <div class="d-flex justify-content-start row pl-5" th:each="i:${#numbers.sequence(0, #lists.size(finishedInforms)/5)}">
                <div class="card bg-light mb-3 mr-3 content col-3" style="max-width: 18rem;"
                     th:each="j:${#numbers.sequence(0,3)}" th:if="${#lists.size(finishedInforms) gt i*4+j}">
                    <div class="card-header"><strong th:text="${finishedInforms[i*4+j].title}"></strong>
                        <br>
                        <small><strong>来自</strong></small>&nbsp;&nbsp;<small th:text="${finishedInforms[i*4+j].team.name}"></small>
                        <br>
                        <small><strong>时间</strong></small>&nbsp;&nbsp;<small
                                th:text="${#dates.format(finishedInforms[i*4+j].createTime, 'yyyy-MM-dd HH:mm:ss')}"></small>
                    </div>
                    <div class="card-body">

                        <p class="card-text" th:text="${finishedInforms[i*4+j].content}">With supporting text below as a natural lead-in
                            to additional content.</p>
                        <button  th:value="${finishedInforms[i*4+j].userInformId}" onclick="delInform(this)" name="delInform" class="btn btn-danger text-white" id="delInform">移除</button>
                    </div>
                </div>

            </div>
            <script>
                function delInform(e){
                    let userInformId =e.value;
                    $.get("/api/informs/update/del/"+userInformId,function (data) {
                        if (data.success) {
                            $("#resultMsg").html("移除成功！");
                        }else{
                            $("#resultMsg").html("移除失败！");
                        }
                        $('#resultModal').modal('show');
                        $("#finishedInformPanel").load("/api/informs/updateView/finished");
                    })
                }
            </script>
        </div>
    </div>
</div>
<div th:replace="alert :: alertFragment"></div>
</body>
</html>